<template>
  <div class="articleManner">
   <el-form  v-model="search" style="margin-top:40px">
      <el-row>
        <el-col class="flexCenter" :span="5">
          <span style="width:60px;font-size:14px;">用户名:</span>
          <el-input
            style="width:150px;"
            clearable
            size="small"
            class="bot"
            v-model.trim="search.userName"
            placeholder="请输入用户名"
          ></el-input>
        </el-col>
        <el-col :span="5" class="flexCenter" >
          <span style="width:90px;font-size:14px;">日志事件:</span>
          <el-select
            style="width:160px;"
            @change="select"
            size="small"
            clearable
            v-model="search.event"
            placeholder="请选择"
          >
            <el-option
              v-for="item in eventStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col class="flexCenter" :span="12" style="display: flex">
            <span style="width: 90px;margin-left:20px;font-size:14px;">时间区间:</span>
            <div class="time">
              <el-date-picker
                style="width:360px;"
                size="small"
                v-model="search.orderAllTime"
                @change="selectTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <span
                v-show="search.orderStartTime || search.orderEndTime"
              ></span>
            </div>
        </el-col>
        <el-col  :span="1">
          <el-button size="small" type="primary" @click="doSearch"
            >查询</el-button>
        </el-col>
      </el-row>
   </el-form>
    <!--表格 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :header-cell-class-name="headerStyle"
      style="width: 100%;margin-top:50px;">
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.describe }}</span>
          </el-form-item>
        </el-form>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="operateUser"
        label="用户名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="IP"
        
        width="140">
      </el-table-column>
      <el-table-column
        prop="operateEvent"
        label="日志事件"
        
        width="120">
      </el-table-column>
      <el-table-column
        prop="operateId"
        label="操作对象id"
        
        show-overflow-tooltip
        width="140">
      </el-table-column>
      <el-table-column
        prop="describe"
        label="日志描述"
        
        show-overflow-tooltip
        width="240">
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="日志时间"
        
        width="180">
        <template slot-scope="scope">
          {{ scope.row.gmtCreate|timeFilter }}
       </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <el-pagination
        style="text-align: right; margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10,20, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import systemApi from "@/api/lejv/system"
import _ from "lodash"; //引入lodash
import { initTime } from "@/utils/index"; //引入时间处理函数
export default {
  name: "articleManner",
  data() {
    return {
      loading:false,
      pageSize:10,
      pageNum:1,
      total:0,
      search: {
        userName:"",
        orderStartTime: "",
        orderEndTime: "",
        event:""
      },
      eventStatus:[
         {
          value:"登录",
          label:"登录"
        },
        {
          value:"提交产品",
          label:"提交产品"
        },
        {
          value:"上架产品",
          label:"上架产品"
        },
        {
          value:"下架产品",
          label:"下架产品"
        },
         {
          value:"批量提交产品",
          label:"批量提交产品"
        },
        {
          value:"删除产品",
          label:"删除产品"
        },
        {
          value:"提交banner",
          label:"提交banner"
        },
        {
          value:"禁用banner",
          label:"禁用banner"
        },
         {
          value:"删除banner",
          label:"删除banner"
        },
        {
          value:"调整优选可见",
          label:"调整优选可见"
        },
         {
          value:"编辑优选",
          label:"编辑优选"
        },
        {
          value:"提交专题",
          label:"提交专题"
        },
        {
          value:"删除专题",
          label:"删除专题"
        },
      ],
      tableData:[
        {
          name:"航三",
          ip:"123.223.34.12",
          rizhi:'已上架11',
          duixiang:"你",
          miaoshu:"照片太美",
          shijian:"2020-12-1  12-11-01"
        },
        {
          name:"航三",
          ip:"123.223.34.12",
          rizhi:'未上架12',
          duixiang:"你",
          miaoshu:"照片太美",
          shijian:"2020-12-1 12-11-01"
        },
        {
          name:"航三",
          ip:"123.223.34.12",
          rizhi:'下架了',
          duixiang:"你",
          miaoshu:"照片太美",
          shijian:"2020-12-1 12-11-01"
        },
        {
          name:"航三",
          ip:"123.223.34.12",
          rizhi:'登陆了',
          duixiang:"你",
          miaoshu:"照片太美",
          shijian:"2020-12-1 12-11-01"
        },
        {
          name:"航三",
          ip:"123.223.34.12",
          rizhi:'你好吗OPPLE',
          duixiang:"你",
          miaoshu:"照片太美",
          shijian:"2020-12-1 12-11-01"
        }
      ]
    };
  },
  computed: {},
  created() { 
   this.initdata()
  },
  mounted() {},
  filters:{
    timeFilter(val){
    // this.gmtCreate=initTime(times)
    // console.log(this.gmtCreate)
     if (val == null || val == "") {
                return "暂无时间";
            } else{
          let d = new Date(val);   //val 为表格内取到的后台时间
          let month =d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
          let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
          let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
          let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
          let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
          let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
            return times;
     }
   }
  },
  methods: {
    initdata(){
      let obj={
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        userName:this.search.userName,
        event:this.search.event,
        startTime:this.search.orderStartTime,
        endTime:this.search.orderEndTime
        // ...this.search,
      }
      console.log(obj)
      obj = _.pickBy(obj,(item) =>item) //使用lodash进行过滤参数为空的搜索条件
      systemApi.getOperatelog(obj)
      .then(res=>{
      console.log(res)
      if(res.msg == "success"){   
        this.loading=false
        if(res.data){
          this.tableData= res.data.operateLogs
          this.total= res.data.totalElements
          }else{
            this.tableData=[]
          }
        }
        }).catch(res=>{
          this.loading=false
        })
    },
    select(val){
      this.search.event=val
      console.log(this.search.event);
    },
    selectTime(e) {
      this.search.orderStartTime = e ? initTime(new Date(e[0]).toJSON()) : "";
      this.search.orderEndTime = e ? initTime(new Date(e[1]).toJSON()) : "";
      // let newTime = new Date(e);
    },
    doSearch(){
      this.pageNum=1 
      this.initdata()
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return "tableStyle";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.initdata()

    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.initdata()
    }
  }
};
</script>

<style scoped lang="scss">
.articleManner {
  margin: 20px;
 .flexCenter {
    display: flex;
    align-items: center;
  }
  .bot {
    width: 200px;
    margin-left: 5px;
  }
  .tableStyle {
  background-color:grey ;
  color: black;
  font-weight: 400;
}
}
</style>
